<template>
  <div>
    <div class="header">
      <div class="tbody">
        <div class="recording">
          <span><i class="el-icon-info"> </i> 共 {{ list.length }} 条记录</span>
        </div>
        <el-table :data="list" style="width: 100%" stripe v-loading="loading">
          <el-table-column prop="type" label="操作类型" align="center">
          </el-table-column>
          <el-table-column prop="operator" label="操作人" align="center">
          </el-table-column>
          <el-table-column prop="outcome" label="执行结果" align="center">
          </el-table-column>
          <el-table-column prop="time" label="操作时间" align="center">
          </el-table-column>
          <el-table-column prop="description" label="描述" align="center">
          </el-table-column>
        </el-table>
        <el-row type="flex" style="height: 60px" align="middle" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryObj.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="queryObj.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="list.length"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data () {
    return {
      loading: false,
      list: [
        {
          type: 'JP',
          operator: '汤刚',
          outcome:
            '专育研还名叫千地交矿则易形使置集打看受农维身老称着压土标习完儿思矿许三书其单。',
          time: '',
          description: '由格新个'
        },
        {
          type: 'US',
          operator: '赵平',
          outcome:
            '内而革然理件并结步难好持之因展劳他照众引意队着三元少处他道风深。',
          time: '',
          description: '铁根两他'
        },
        {
          type: 'US',
          operator: '秦丽',
          outcome: '号每极小公日日空生重向保名区支应细目们线格放记二土较认。',
          time: '',
          description: '在精内看'
        },
        {
          type: 'CN',
          operator: '杜娜',
          outcome:
            '消时百经因政且说和何展军属年西市由三观许用说需入劳里地目月业。',
          time: '',
          description: '亲料西从'
        },
        {
          type: 'US',
          operator: '沈磊',
          outcome:
            '变组识率四战许太党千交五况说清克导具部也眼具候农研构比办二叫看。',
          time: '',
          description: '书书海增'
        },
        {
          type: 'CN',
          operator: '赵洋',
          outcome:
            '组身才般两至分过里层存铁到局常说深是复战思派料向从风支相器易石',
          time: '',
          description: '中委论百'
        }
      ],
      queryObj: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    async initTable () {
      this.loading = true
      this.list[0].time = moment().format('YYYY-MM-DD HH:mm:ss')
      this.list[1].time = moment().format('YYYY-MM-DD HH:mm:ss')
      this.list[2].time = moment().format('YYYY-MM-DD HH:mm:ss')
      this.list[3].time = moment().format('YYYY-MM-DD HH:mm:ss')
      this.list[4].time = moment().format('YYYY-MM-DD HH:mm:ss')
      this.list[5].time = moment().format('YYYY-MM-DD HH:mm:ss')
      this.loading = false
    },
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
    },
    async handleCurrentChange (val) {
      this.queryObj.page = val
    }
  }
}
</script>

<style scoped lang="less">
.header {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  padding: 10px 15px;
  box-shadow: 0px 0px 20px #ccc;
}
.tbody {
  .recording {
    height: 35px;
    width: 98%;
    padding: 8px 16px;
    margin: 15px 25px;
    background-color: #f4f4f5;
    border-radius: 5px;
    span {
      font-size: 13px;
      color: #909399;
    }
  }
}
</style>
